<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>虚拟dom</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<div id="app" class="main">
		<h1 title="虚拟dom">虚拟dom</h1>
		<ul>
			<li>hello</li>
			<li>world</li>
		</ul>
	</div>
</body>
<script src="004.js"></script>
<script>
	
// 1. 获取根节点dom
let dom = document.querySelector('#app');
let parent = dom.parentNode;
let vnode = createNode(dom);


// 2. 使用递归函数将虚拟的dom转换为真实的dom
function createDom(vnode) {
	let dom;	// 真实的dom
	let type = vnode.type;

	if(type === 1) {
		let data = vnode.data;
		let children = vnode.children;
		dom = document.createElement(vnode.name);

		// 遍历属性值
		data.forEach(val=>{
			let key = Object.keys(val);
			dom.setAttribute(key, val[key]);
		});

		// 使用递归函数创建子元素
		for(let i = 0; i < children.length; i++) {
			dom.appendChild(createDom(children[i]));
		}
	} 
	else if(type === 3) {
		dom = document.createTextNode(vnode.value);
	}

	return dom;
}
let realdom = createDom(vnode);
parent.append(realdom);


/* 总结

	1. 已经实现了将虚拟dom转换为真实dom的算法

	2. 存在的问题
		-1 现在没有将数据驱动和虚拟dom结合再一起
*/


</script>
</html>
